{include file='public/header' /}
<body xmlns="">
<style>
    .el-menu-item.is-active{
        background-color: #0576b9 !important;
    }
</style>
<div id="app" v-cloak>
    <el-container>
        <el-aside :width="width" class="ht-left">
            <div class="ht-left-logo" @click="goHome" v-if="!is_show" style="cursor: pointer;background-color: #121e2d">
                {$config.web_name ?: ''}
            </div>
            <el-menu :default-active="path" :collapse="is_show"
                     active-text-color="#fff"
                     background-color="#121e2d"
                     class="ht-left-menu"
                     text-color="#8fa6bf"
                     @select="clickMenu"
            >
                <template v-for="(item,index) in menu">
                    <el-submenu :index="item.url" v-if="item.child.length > 0">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <el-menu-item v-for="(subItem,subIndex) in item.child" :index="subItem.url" :key="subIndex"
                                      style="padding-left: 50px">
                            {{ subItem.title }}
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item :index="item.url" v-else>
                        <i :class="item.icon" v-if="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
            <a href="https://www.htidc.net" target="_blank" v-if="!is_show">
                <div class="ht-left-copyright">
                    <span>v1.0.1</span>
                    <div class="son">
                         {{is_show ? '海腾' : '海腾提供技术支持'}}
                    </div>
                </div>
            </a>
        </el-aside>
        <el-container>
            <el-header height="50px">
                <div class="ht-right-header" style="background-color: #fff;color: #606266">
                    <div class="ht-header-left" style="">
                        <div class="ht-header-icon" v-if="!is_show">
                            <i class="el-icon-s-fold" @click="changeShow"
                               style="font-size: 1.2em;cursor: pointer"></i>
                        </div>
                        <div class="ht-header-icon" v-else>
                            <i class="el-icon-s-unfold" @click="changeShow"
                               style="font-size: 1.2em;cursor: pointer"></i>
                        </div>
                        <div class="ht-header-icon">
                            <i class="el-icon-s-home" @click="goHome"
                               style="font-size: 1.2em;cursor: pointer"></i>
                        </div>
                        <div class="ht-header-icon">
                            <i class="el-icon-refresh-right" @click="refresh"
                               style="font-size: 1.2em;cursor: pointer"></i>
                        </div>
                    </div>
                    <div class="ht-header-image">
                        <el-dropdown trigger="click" @command="handleCommand">
                            <span class="el-dropdown-link" style="color: #606266; cursor: pointer">
                                {:session('admin.real_name')}
                                <i class="el-icon-arrow-down"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="change">修改密码</el-dropdown-item>
                                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </el-header>
            <el-main>
                <div class="ht-index-mian">
                    <iframe id="mainFrame" name="mainFrame" :src="path" scrolling="yes" height="500px"></iframe>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
{include file='public/common'}
<script src="/static/elementUi/component/remind.js"></script>
<script>
    let vs
    var vm = new Vue({
        el: "#app",
        data: function () {
            return {
                menu: [],
                path: "",
                row:{},
                is_show:false,
                width:'220px'
            }
        },
        created: function () {
            vs = this
            this.init()
            this.getMenu()
        },
        methods: {
            changeShow() {
                vs.is_show =!vs.is_show;
                vs.width = vs.width === "220px" ? "70px" : "220px"
            },
            init: function () {
                // 当前路由选项
                let route = window.location.hash === "" ? "#{:url('Index/main')}" : window.location.hash;
                this.path = route.replace('#', '');
                // 放大缩小
                // let collapseCache = storage.get("adminCollapse");
                // this.isCollapse = collapseCache === null ? false : collapseCache;
            },
            handleCommand: function (cmd) {
                if (cmd === "logout") {
                    $.post("{:url('Index/logout')}", function (res) {
                        location.href = "";
                    })
                } else if (cmd === 'change') {
                    this.path = "{:url('Index/password')}"
                }
            },
            goHome: function () {
                window.open("/")
                // this.path = "{:url('Index/main')}"
            },

            refresh: function () {
                document.getElementById('mainFrame').contentWindow.location.reload(true);

                // document.frames('mainFrame').location.reload()
            },
            clickMenu: function (path) {
                this.path = path
                console.log(path)
            },
            getMenu() {
                let that = this
                $.post("{:url('Index/index')}", function (res) {
                    that.menu = res.data.menus
                })
            }
        },
        watch: {
            path: function (v) {
                window.location.hash = v;
            }
        }
    })

    function showImg(path, type = 'image') {
        const fancybox = new Fancybox([
            {
                src: path,
                type: type,
            },
        ]);
    }
    function showImages(paths,index=1,title=2,caption=3) {
        let images = []
        paths.map(item=>{
            images.push({
                src:item,
                type:'image',
                title:title,
                caption:caption,
            })
        })
        if (!images.length) {
            alert('暂无图片')
            return
        }
        const fancybox = new Fancybox(images,{
            startIndex:index
        });
    }
</script>

</body>
</html>


